<template>
  <div class="scoreInput-moudle">
    <div class="scoreCategory-text">{{ title }}</div>

    <div class="scoreInput-container">
      <input
        class="scoreInput-content"
        type="text"
        placeholder="输入分数"
        :value="modelValue"
        @input="handleInput"
      />
      <span class="scoreInput-text">分</span>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, defineProps, defineEmits } from "vue";

defineProps({
  title: String, // 标题
  modelValue: Number, // 分数
});

// 定义 emits，用于向父组件发送更新事件
const emit = defineEmits(["update:modelValue"]);

// 处理输入事件
const handleInput = (event) => {
  const inputValue = event.target.value;
  // 将输入值转换为数字，如果输入无效则使用 NaN 或默认值
  const numValue = inputValue ? Number(inputValue) : undefined;
  // 触发更新事件，将新值传递给父组件
  emit("update:modelValue", numValue);
};
</script>
<style scoped>
@import url("@/assets/scss/megaGame.scss");
</style>
